<template>
  <div id="app">
    <div class="page" :style="pageStyle" @click.stop="select(null)">
      <template v-for="(ele,i) in page.elements">
        <div :key="'a' + i" v-if="ele.type === 'shape' && ele.angle > 0" class="element" :style="elementStyle(ele, false)">
        </div>
        <div :key="i" v-if="ele.type === 'shape'" class="element" :style="elementStyle(ele)" @click.stop="select(ele)">
        </div>
      </template>
      <div id="panel" :style="panelStyle(selectedEle)">
      </div>
    </div>
  </div>
</template>

<script>
import { PageTypes } from './config'
import * as d3 from 'd3'
// let selectEle = null
export default {
  name: 'App',
  data: function () {
    return {
      PageTypes,
      page: {
        // 应该有三个大小：画布大小、页面大小、视窗位置
        width: 800,
        height: 1000,
        type: 'inner',
        name: '第1页',
        elements: [
          {
            x: 0,
            y: 0,
            width: 100,
            height: 100,
            type: 'shape', // photo,text,decorate,shape
            angle: 135, // 旋转
            fixed: 1, // 锁定
            display: 1, // 显示
            photo: {},
            text: {},
            decorate: {},
            shape: {
              color: 'red'
            }
          },
          {
            x: 150,
            y: 150,
            width: 100,
            height: 100,
            type: 'shape', // photo,text,decorate,shape
            angle: 0, // 旋转
            fixed: 0, // 锁定
            display: 1, // 显示
            photo: {},
            text: {},
            decorate: {},
            shape: {
              color: 'green'
            }
          }
        ]
      },
      selectedEle: null,
      panel: {
        x: 0,
        y: 0,
        width: 0,
        height: 0,
        angle: 0
      }
    }
  },
  computed: {
    pageStyle: function () {
      return {
        width: this.page.width + 'px',
        height: this.page.height + 'px'
      }
    }
  },
  created () {
  },
  mounted () {
    let dx = 0
    let dy = 0
    d3.select('#panel')
      .call(d3.drag()
        // .container(function () {
        //   console.log(this.parentNode)
        //   return this.parentNode
        // })
        .on('start', (event) => {
          dx = event.sourceEvent.layerX
          dy = event.sourceEvent.layerY
          console.log(event)
        })
        .on('drag', (event) => {
          console.log(event)
          this.selectedEle.x = event.x - dx
          this.selectedEle.y = event.y - dy
        })
        .on('end', () => {
          this.select(this.selectedEle)
        })
      )
  },
  methods: {
    test: function () {},
    select: function (ele) {
      console.log(arguments)
      this.selectedEle = ele
      if (ele) {
        this.panel.x = ele.x
        this.panel.y = ele.y
        this.panel.width = ele.width
        this.panel.height = ele.height
        this.panel.angle = ele.angle
      } else {
        this.panel.x = 0
        this.panel.y = 0
        this.panel.width = 0
        this.panel.height = 0
        this.panel.angle = 0
      }
    },
    elementStyle: function (ele, useAngle = true) {
      let style = {
        left: ele.x + 'px',
        top: ele.y + 'px',
        width: ele.width + 'px',
        height: ele.height + 'px',
        transform: 'rotate(' + ele.angle + 'deg)',
        cursor: ele.fixed ? 'auto' : 'pointer',
        'background-color': ele.shape.color
      }
      if (useAngle === false) {
        style.transform = 'rotate(0deg)'
        style.opacity = 0.2
      }
      return style
    },
    panelStyle: function () {
      let style = {
        position: 'absolute',
        left: this.panel.x + 'px',
        top: this.panel.y + 'px',
        width: this.panel.width + 'px',
        height: this.panel.height + 'px',
        transform: 'rotate(' + this.panel.angle + 'deg)',
        cursor: 'move',
        border: 'dashed 1px',
        'z-index': 10000
      }
      return style
    }
  }
}
</script>

<style>
.page {
  display: relative;
  border: solid 1px gray;
}
.element {
  position: absolute;
}
</style>
